<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试mvc连接</title>
		<!-- 这个东西不能不写结束标签 不能以/结尾 -->
		<script src="../JQuery/jquery-3.6.0.min.js"></script>
		<script>
			var rowNum=0;
			var data1;
			var rowsPerPage1 = 5;
			
			// //从下标i开始显示全部
			// function showTableAll(data,i){
			// 	for (; i < data.length; i++) {
			// 		showRow(data,i);
			// 	}	
			// 	rowNum=i+1;
			// }
			
			//显示开始五行
			function fnF5(){
				showTable(data1,0);
			}
			
			//显示前一页
			function fnPre(){
				if(rowNum >= rowsPerPage1*2){
					rowNum -= rowsPerPage1*2;
				    showTable(data1,rowNum);
				}else{
					showTable(data1,0);
				}
			}
			//显示后一页
			function fnNext(){
				if(rowNum < data1.length){
				    showTable(data1,rowNum);
				}
			}
			
			$(function(){
				
			})
			//获取表格数据
			function fn1(){
				$.ajax({
					url:"http://localhost:8090/user/getAll",
					data:null,
					success:function(data){
						data1 = data;
						showTable(data1,0);//记得写参数
						console.log("SUCCESS!!!");
					},
					error:function(data){
						console.log("ERROR!!!!!");
					}
					
				})
			}
			/* 
			 // console.log(i);
			 // console.log(typeof(i))
			 // console.log(typeof(rowsPerPage1))
			 // console.log(rowsPerPage1)
			 // console.log(lastIndex)
			 // console.log(data.length)
			 */
			//从下标i开始显示rowsPerPage条
			function showTable(data,i){
				setRowsOfPage();
				clearT2();
				var index = i;
				var lastIndex = i + rowsPerPage1;
			
				for (;index < lastIndex && index<data.length; index++) {
					showRow(data[index]);
				}	
				
				rowNum = index;
				//显示页数
				var page=(rowNum-rowNum%rowsPerPage1)/rowsPerPage1
				$("#d4_in2").text(page);
			}
			//追加显示一行
			function showRow(user){
					var str = `<tr align='center'>
					<td>${user.id}</td>
					<td>${user.name}</td>
					<td>${user.age}</td>
					<td>${user.sex}</td>
					</tr>`;
					$("#d4_t2").append(str);
				
			}
			//清空 显示一个表头
			function clearT2(){
				var str=
				`<tr align='center'>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
				</tr>`
				$("#d4_t2").html(str);
			}
			//设置rowNumPerPage 设置每页条数
			function setRowsOfPage(){
				//!!!!!!input输入的一定是String类型!!!!!!!!
				var str=$("#d4_in1").val();
				var num = parseInt(str);
				if(num > 0){
					rowsPerPage1 = num;
				}
			}
			
		</script>
	</head>
	<body>

		<a href="http://localhost:8090/user/getAll">http://localhost:8090/user/getAll</a>
		<div>
			<table id="d4_t1" border="1px" align="center" width="80%">
				<tr>
					<td align="center">
						<input type="button" value="显示数据" onclick="fn1();" />
					</td>
					<td>
						<input type="button" value="显示前五条" onclick="fnF5();" />
					</td>
					<td>
						<input type="button" value="上一页" onclick="fnPre();" />
					</td>
					<td>
						<input type="button" value="下一页" onclick="fnNext();" />
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="number" name="perPage" id="d4_in1" />
					</td>
					<td colspan="2">
						<span id="d4_in2"></span>
					</td>
				</tr>
				<tr>
					<td align="center" colspan="4">
						<h1>用户列表 </h1>
					</td>
				</tr>

			</table>
			<table id="d4_t2" border="1px" align="center" width="80%">
				<tr align="center">
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
				</tr>
			</table>

		</div>


	</body>
</html>
